<template>
  <div class="activityMarket">
    <div class="c-ph24">
      <div class="c-flex-row c-justify-sb c-aligni-center c-hh92">
        <span class="c-fc-xblack c-fs24 c-fw600">以下票劵正在展开营销活动</span>
      </div>
      <!-- 循环 -->
      <template v-for="(item, index) in marketList">
        <div class="market-list c-bg-white c-br20 c-mb30" :key="index" v-if="(item.collage != null && item.collage.status == 2) || (item.bargain != null && ((item.bargain.status == 1 && item.bargain.isPreheat == 1) || item.bargain.status == 2)) || (item.sales != null && item.sales.sales.status == 2 && (item.sales.limit == 0 || item.sales.balance > 0))">
          <!-- 标题 -->
          <div class="c-flex-row c-justify-sb c-aligni-center c-hh68 market-title c-p c-pr20">
            <div class="c-flex-row c-aligni-center c-hh48 c-fs20 c-fw500 market-type theme-fc c-ph20">
              <i class="iconfont theme-fc c-mr10 c-fs22" v-html="iconName(item)"></i>
              <span class="c-flex-row c-aligni-center">{{textName(item)}}</span>
            </div>
            <bargain-time :time="timeEnd(item)" :classObject="{color: 'theme-fc', bg: '', size: '', padding: '', bd: ''}" @finshTime="finshTime"></bargain-time>
          </div>
          <!-- 内容 -->
          <div class="c-ph20 c-pv20 c-flex-row c-justify-sb c-aligni-center c-p">
            <div class="c-flex-1">
              <p class="c-fc-xblack c-fs26 c-fw500 c-text-ellipsis2">{{item.name}}</p>
              <div class="c-flex-row c-aligni-center c-pt12">
                <div class="theme-fc c-fs18 c-pr10">{{'￥' | iosPriceFilter}}
                  <span class="c-fs24">{{amountPrice(item)}}</span>
                </div>
                <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{item.price}}</span>
              </div>
            </div>
            <div class="c-ww120 c-hh44 c-flex-row c-justify-center c-aligni-center c-br24  c-fs20" v-if="isPayOrder == 0 || (item.mtkType == 2 && item.isPayOrder == 1)" @click="handleClickCommonMarket(item)" :class="themeStyle(item)">{{textMarket(item)}}</div>
          </div>
          <!-- line -->
          <template v-if="item.mtkType == 2">
            <div class="market-line" v-if="item.collage.attendCount > 0 || (item.collage.isCollageOnline == 1 && item.collage.getSeeMoreCount > 0)"></div>
            <div class="c-ph14">
              <div class="c-flex-row c-justify-sb c-aligni-center c-fs22 c-fc-sblack c-hh80" @click="handleClickView(item)" v-if="item.collage.attendCount > 0 && isRepeatOrder == 1" :class="item.collage.isCollageOnline == 1 ?'c-bd-b1-f6':''">
                <p>您当前有<span class="theme-fc">{{item.collage.attendCount}}</span>个正在进行中的拼团</p>
                <div class="c-flex-row c-justify-sb c-aligni-center c-fc20 theme-fc">立即查看
                  <i class="iconfont">&#xe986;</i>
                </div>
              </div>
              <div class="c-flex-row c-justify-sb c-aligni-center c-fs22 c-fc-sblack c-hh80" @click="handleClickGetMoreList(item)" v-if="item.collage.isCollageOnline == 1 && item.collage.getSeeMoreCount > 0">
                <p>当前有<span class="theme-fc">{{item.collage.getSeeMoreCount}}</span>个小伙伴正在开团</p>
                <div class="c-flex-row c-justify-sb c-aligni-center c-fc20 theme-fc">立即查看
                  <i class="iconfont">&#xe986;</i>
                </div>
              </div>
            </div>
          </template>
          <template v-else-if="item.mtkType == 12 && item.bargain.attendCount > 0 && isRepeatOrder == 1">
            <div class="market-line"></div>
            <div class="c-ph14">
              <div class="c-flex-row c-justify-sb c-aligni-center c-fs22 c-fc-sblack c-hh80" @click="handleClickView(item)">
                <p>您当前有<span class="theme-fc">{{item.bargain.attendCount}}</span>个正在进行中的砍价</p>
                <div class="c-flex-row c-justify-sb c-aligni-center c-fc20 theme-fc">立即查看
                  <i class="iconfont">&#xe986;</i>
                </div>
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>
    <!-- 弹窗拼团 -->
    <cj-popup v-model="showHideOnBlur" round title="正在拼单" >
      <div class="c-ww480 c-ph24 c-mb24 c-maxh427 c-content-scroll c-scroll-touch" id="onBlurScroll">
        <template v-for="(item, index) in collageListAll">
          <div class="c-pv20 c-flex-column" :key="index" v-if="item.status == 2" :class="index == collageListAll.length - 1 ? '':'c-bd-b1'">
            <div class="c-flex-row c-justify-sb c-aligni-center c-pt12">
              <div class="c-flex-row c-flex-grow1 c-w0">
                <div class="c-ww96 c-hh96 c-p">
                  <img :src="$addXossFilter(item.headUrl, require('../../assets/defult_head.png'))" class="c-ww96 c-hh96 c-brp50" />
                  <div class="c-pa c-p-b0 c-bg-white collage-name c-p-lp50">
                    <div class="collage-name c-pa c-p-b0 c-fs20 c-p-lp50 theme-fc c-fw600 mbcolor">{{item.clustering}}人团</div>
                  </div>
                </div>
                <div class="c-flex-column c-hh96 c-justify-sa c-aligni-start c-ml16 c-flex-grow1 c-w0">
                  <div class="c-fs24 c-fc-xblack c-flex-row c-aligni-baseline c-text-ellipsis1">
                    <div class="c-maxw160 c-text-ellipsis1">{{item.nickName}}</div>
                    <div class="c-fc-gray">
                      <span class="c-fs20">还差</span>
                      <span class="theme-fc">{{item.shortCount}}人</span>
                    </div>
                  </div>
                  <div class="c-fc-gray c-fs20 c-w100 c-text-ellipsis1" style="text-align: left !important;">剩余<cj-clocker :time="item.endTime" format="%D天%H时%M分%S秒" @on-finish="onfinish(item, index)"></cj-clocker></div>
                </div>
              </div>
              <div class="theme-bg c-fc-white c-fs24 c-ph24 c-pv12 c-br36" @click="goCollageDetail(item.groupId,item.collageId)">{{'去拼团' | iosPayText(prodType)}}</div>
            </div>
          </div>
        </template>
        <div class="c-fs18 c-fc-sblack c-textAlign-c c-pv20" @click="getSeeMoreList(prodId,1)" v-if="is_collagePage">加载更多&nbsp;></div>
      </div>
    </cj-popup>
    <!-- 公共弹窗 -->
    <cj-popup v-model="showDialog" round :title="`您正在进行中的${dialogObject.title}`">
      <div class="c-ww480 c-mb20 c-fs24 c-fc-gray c-ph20 c-textAlign-l">活动票劵：{{dialogObject.name}}</div>
      <div class="c-ww480 c-ph24 c-mb24 c-maxh427 c-content-scroll c-scroll-touch" id="dialogScroll">
        <template v-for="(item, index) in dialogObject.list">
          <div class="c-mb30 c-bd1-f5 c-br12" :key="index" v-if="dialogObject.mtkType == 12 ? item.status == 1 : dialogObject.mtkType == 2 ? item.status == 2 : ''">
            <div class="c-flex-row c-justify-sb c-aligni-center c-ph20">
              <div class="c-flex-row c-flex-grow1 c-w0">
                <div class="c-flex-column c-hh96 c-justify-sa c-aligni-start c-flex-grow1 c-w0">
                  <div class="c-fc-xblack c-fs24">
                    距结束 <cj-clocker :time="item.endTime" format="%D天%H时%M分%S秒" @on-finish="dialogFinish(item, index, dialogObject.mtkType, dialogObject.mtkId)"></cj-clocker>
                  </div>
                  <div class="c-flex-row c-aligni-center" v-if="dialogObject.mtkType == 12">
                    <div class="theme-fc c-fs18 c-pr10">已砍{{'￥' | iosPriceFilter}}
                      <span class="c-fs24">{{item.hadBargainPrice}}</span>
                    </div>
                    <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{item.prodPrice}}</span>
                  </div>
                  <div class="c-fs20 theme-fc" v-if="dialogObject.mtkType == 2">还差{{dialogObject.mtkType == 2 ? item.shortCount : 0}}人</div>
                </div>
              </div>
              <div class="theme-bg c-fc-white c-fs24 c-ph24 c-pv12 c-br36" @click="handleClickBargainActivity(item, dialogObject.mtkType)">去邀请</div>
            </div>
          </div>
        </template>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import bargainTime from '@/components/templates/bargain/bargainTime';
import { utilJs } from "@/utils/common.js"
export default {
  name: 'ActivityMarket',
  components: {
    bargainTime,
  },
  props: {
    marketList: {
      type: Array,
      default() {
        return []
      }
    },
    activityName: {
      type: String,
      default: ''
    },
    status: {
      type: Number,
      default: 0, // 活动状态0，未开始，1，进行中 2已结止 3已结束
    },
    isRepeatOrder: {
      type: Number,
      default: 0, //0为不可重复下单
    },
    canBuy: {
      type: Boolean,
      default: false
    },
    hasPermission: {
      type: Boolean,
      default: false
    },
    refereeId: {
      type: String,
      default: ''
    },
    goodsRoomId: {
      type: String,
      default: ''
    },
    isPayOrder: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      showHideOnBlur: false,
      showDialog: false,
      classObject: {
        default: ''
      },
      dialogObject: {
        title: '',
        name: '',
        list: [],
        mtkType: '',
        mtkId: ''
      },
      collageListAll: [], //全部拼团
      is_collagePage: false,
      collagePage: 1,
      limit: 10,
      prodType: global.ckFrom.activity,
      prodId: ''
    }
  },
  computed: {
    textMarket() {
      return function (item) {
        let textMarket = '';
        if (item.mtkType == 2 && item.collage != null && this.status == 1 && this.canBuy && item.collage.status == 2 && (item.collage.userType == -1 || this.isRepeatOrder == 1)) {
          textMarket = '发起拼团';
        } else if (item.mtkType == 2 && item.collage != null && item.collage.status == 2 && item.collage.userType != -1 && this.isRepeatOrder == 0) {
          textMarket = '拼团中...';
        } else if (item.mtkType == 12 && item.bargain != null && this.status == 1 && this.canBuy && ((item.bargain.status == 1 && item.bargain.isPreheat == 1) || item.bargain.status == 2)) {
          if (item.bargain.userType == 1 && this.isRepeatOrder == 0) {
            textMarket = '正在砍价';
          } else if (item.bargain.userType == -1 || this.isRepeatOrder == 1) {
            textMarket = '发起砍价';
          }
        } else if (item.mtkType == 1 && item.sales != null && this.status == 1 && this.canBuy && item.sales.sales.status == 2) {
          textMarket = '立即抢购';
        }
        return textMarket;
      }
    },
    themeStyle() {
      return function (item) {
        let themeStyle = '';
        if (item.mtkType == 2 && item.collage != null && this.status == 1 && this.canBuy && item.collage.status == 2 && (item.collage.userType == -1 || this.isRepeatOrder == 1)) {
          themeStyle = 'theme-bg c-fc-white'
        } else if (item.mtkType == 2 && item.collage != null && item.collage.status == 2 && item.collage.userType != -1 && this.isRepeatOrder == 0) {
          themeStyle = 'theme-bd1 theme-fc';
        } else if (item.mtkType == 12 && item.bargain != null && this.status == 1 && this.canBuy && ((item.bargain.status == 1 && item.bargain.isPreheat == 1) || item.bargain.status == 2)) {
          if (item.bargain.userType == 1 && this.isRepeatOrder == 0) {
            themeStyle = 'theme-bd1 theme-fc';
          } else if (item.bargain.userType == -1 || this.isRepeatOrder == 1) {
            themeStyle = 'theme-bg c-fc-white'
          }
        } else if (item.mtkType == 1 && item.sales != null && this.status == 1 && this.canBuy && item.sales.sales.status == 2) {
          themeStyle = 'theme-bg c-fc-white';
        }
        return themeStyle;
      }
    },
    amountPrice() {
      return function (item) {
        let price = '';
        if (item.mtkType == 2 && item.collage != null) {
          if (item.collage.captainPriceType == 2) {
            price = Number(item.collage.captainPrice).toFixed(2) + `起`;
          } else {
            price = Number(item.collage.captainPrice).toFixed(2);
          }
        } else if (item.mtkType == 12 && item.bargain != null) {
          price = Number(item.bargain.reservePrice).toFixed(2);
        } else if (item.mtkType == 1 && item.sales != null) {
          price = Number(item.sales.price).toFixed(2);
        }
        return price
      }
    },
    textName() {
      return function (item) {
        let text = '';
        if (item.mtkType == 2 && item.collage.collageGroupType == 2 && item.collage != null) {
          text = '阶梯拼团'
        } else if (item.mtkType == 2 && item.collage.collageGroupType == 1 && item.collage != null) {
          text = '拼团'
        } else if (item.mtkType == 12 && item.bargain != null) {
          text = '砍价购'
        } else if (item.mtkType == 1 && item.sales != null) {
          text = '限时购'
        }
        return text
      }
    },
    iconName() {
      return function (item) {
        let iconName = '';
        if (item.mtkType == 2 && item.collage != null) {
          iconName = '&#xe995;'
        } else if (item.mtkType == 12 && item.bargain != null) {
          iconName = '&#xe79e;'
        } else if (item.mtkType == 1 && item.sales != null) {
          iconName = '&#xe890;'
        }
        return iconName
      }
    },
    timeEnd() {
      return function (item) {
        let endTime = '';
        if (item.mtkType == 2 && item.collage != null) {
          endTime = item.collage.endTime;
        } else if (item.mtkType == 12 && item.bargain != null) {
          endTime = item.bargain.endTime;
        } else if (item.mtkType == 1 && item.sales != null) {
          endTime = item.sales.sales.endTime;
        }
        return endTime;
      }
    },
  },
  watch: {
    showHideOnBlur() { //展示全部拼团的时候禁止页面滚动
      if (this.showHideOnBlur) {
        // document.documentElement.style.overflowY = 'hidden'
        // document.body.style.position = 'fixed';
      } else {
        document.body.style.position = 'static';
        document.getElementById('onBlurScroll').scrollTop = 0;
      }
    },
    showDialog() { //展示全部拼团的时候禁止页面滚动
      if (this.showDialog) {
        // document.documentElement.style.overflowY = 'hidden'
        // document.body.style.position = 'fixed';
      } else {
        document.body.style.position = 'static';
        document.getElementById('dialogScroll').scrollTop = 0;
      }
    }
  },
  activated() {
    this.showHideOnBlur = false;
    this.showDialog = false;
    this.classObject = {
      default: ''
    };
    this.dialogObject = {
      title: '',
      name: '',
      list: [],
      mtkType: '',
      mtkId: ''
    };
    this.collageListAll = [];
    this.is_collagePage = false;
    this.collagePage = 1;
    this.limit = 10;
    this.prodId = '';
  },
  methods: {
    onfinish(item, listIndex) {
      this.collageListAll.forEach((val, index, arr) => {
        if (listIndex == index) {
          val.status = 3;
        }
      });
      let isHide = this.collageListAll.every(val => {
        return val.status == 3;
      })
      if (isHide) {
        this.showHideOnBlur = false;
        this.marketList.forEach((val, index, arr) => {
          if (val.mtkId == item.collageId) {
            val.collage.attendCount = 0;
            val.collage.attendList = [];
            val.collage.getSeeMoreCount = 0;
            // 不可重复下单情况下
            if (this.isRepeatOrder == 0) {
              val.collage.userType = -1;
              val.isPayOrder = 0;
              this.isPayOrder = 0;
              this.$emit("finishMarket")
            }
          }
        })
      } else {
        this.marketList.forEach((val, index, arr) => {
          if (val.mtkId == item.collageId) {
            val.collage.attendCount = --val.collage.attendCount;
            val.collage.getSeeMoreCount = --val.collage.getSeeMoreCount;
          }
        })
      }
    },
    //跳转到拼团详情页
    goCollageDetail: function (groupId, collageId) {
      if (!utilJs.isOpenIosGzhPay(this.prodType)) {
        this.$store.commit('updateShowVitualModal', true);
        return;
      }
      document.body.style.position = 'static';
      let pathQuery = {
        groupId: groupId,
        collageId: collageId,
        isRepeatOrder: this.isRepeatOrder
      };
      if (this.$route.query.refereeId || this.refereeId != '') {
        pathQuery.refereeId = this.$route.query.refereeId || this.refereeId;
      };
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/collage/collageDetail",
        query: pathQuery
      });
    },
    handleClickGetMoreList(item) {
      this.collageListAll = [];
      this.collagePage = 1;
      this.is_collagePage = false;
      this.getSeeMoreList(item.prodId, 0);
      this.showHideOnBlur = true;
    },
    getSeeMoreList(prodId, isMore) {
      this.prodId = prodId;
      if (isMore == 0) {
        if (this.collageListAll.length > 0) {
          return
        } else {
          this.collageListAll = [];
          this.collagePage = 1;
          this.is_collagePage = false;
        }
      }
      utilJs.getMethod(`${global.apiurl}activities/getSeeMoreList?prodId=${prodId}&page=${this.collagePage}&limit=${this.limit}`, res => {
        if (this.collagePage == 1) {
          this.collageListAll = res.data;
        } else {
          let list = res.data;
          this.collageListAll = this.collageListAll.concat(list);
        }
        this.collagePage = res.data && (res.data.length >= this.limit) ? (this.collagePage + 1) : this.collagePage;
        this.is_collagePage = res.data && (res.data.length >= this.limit) ? true : false;
      })
    },
    handleClickCommonMarket(item) {
      this.$emit("handleClickCommonMarket", item)
    },
    handleClickBargainActivity(item, mtkType) {
      document.body.style.position = 'static';
      this.$emit("handleClickBargainActivity", item, mtkType)
    },
    dialogFinish(item, listIndex, mtkType, mtkId) {
      this.dialogObject.list.forEach((val, index) => {
        if (listIndex == index && mtkType == 12) {
          val.status = 2
        } else if (listIndex == index && mtkType == 2) {
          val.status = 3
        }
      });
      let isHide = this.dialogObject.list.every(val => {
        if (mtkType == 12) {
          return val.status == 2
        } else if (mtkType == 2) {
          return val.status == 3
        }
      })
      if (isHide) {
        this.showDialog = false;
        this.marketList.forEach((val, index, arr) => {
          if (mtkType == 2 && (val.mtkId == mtkId)) {
            val.collage.attendCount = 0;
            val.collage.attendList = [];
            val.collage.getSeeMoreCount = 0;
            // 不可重复下单情况下
            if (this.isRepeatOrder == 0) {
              val.collage.userType = -1;
              val.isPayOrder = 0;
              this.isPayOrder = 0;
              this.$emit("finishMarket")
            }
          } else if (mtkType == 12 && (val.mtkType == mtkId)) {
            val.bargain.attendCount = 0;
            val.bargain.attendList = [];
          }
        })
      } else {
        this.marketList.forEach((val, index, arr) => {
          if (mtkType == 2 && (val.mtkId == mtkId)) {
            val.collage.attendCount = --val.collage.attendCount;
            val.collage.getSeeMoreCount = --val.collage.getSeeMoreCount;
          } else if (mtkType == 12 && (val.mtkType == mtkId)) {
            val.bargain.attendCount = --val.bargain.attendCount;
          }
        })
      }
    },
    // 点击查看正在进行中的砍价
    handleClickView(item) {
      this.dialogObject = {
        title: item.mtkType == 2 ? '拼团' : item.mtkType == 12 ? '砍价' : '',
        name: item.name,
        list: item.mtkType == 2 ? item.collage.attendList : item.mtkType == 12 ? item.bargain.attendList : '',
        mtkType: item.mtkType,
        mtkId: item.mtkId
      }
      this.showDialog = true;
    },
    finshTime() {
      this.$emit("finshTimeMarket")
    },
  }
}
</script>

<style lang="less" scoped>
.market-list {
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
}
.market-type {
  background: var(--rgba10color);
  border-radius: 0px 5rem 5rem 0px;
}
.market-title:after {
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  right: 0.5rem;
  height: 1px;
  background: #f6f6f6;
  content: "";
}
.market-line {
  position: relative;
  border-bottom: 2px dashed #f6f6f6;
}
.market-line:after {
  position: absolute;
  top: -.25rem;
  left: 0;
  width: .25rem;
  height: .5rem;
  background: #f6f6f6;
  border-radius: 0 0.5rem 0.5rem 0;
  content: "";
}
.market-line:before {
  position: absolute;
  top: -.25rem;
  right: 0;
  width: .25rem;
  height: .5rem;
  background: #f6f6f6;
  border-radius: 0.5rem 0 0 0.5rem;
  content: "";
}
/deep/ .collage-dialog .weui-dialog {
  border-radius: .5rem!important;
}
.collage-name {
  width: 1.8rem;
  height: .7rem;
  transform: translateX(-50%);
  border-radius: 14px;
}
.mbcolor {
  background-color: var(--rgba10color);
}
</style>